/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 10:06
 *
 * 通讯录
 */

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    Clipboard,
    Linking,
    Modal,
    SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View
} from 'react-native';
import {
    COLOR_GRAY_LINE,
    FONT_COLOR_SUB_TITLE,
    COLOR_GRAY_BACKGROUND,
    FONT_COLOR_TITLE
} from "../../../constant/PHColors"
import OffWorkView from "../../../component/OffWorkView/OffWorkView"
import {styles} from "./ContactsScreen.Style";
import AntDesign from "react-native-vector-icons/AntDesign";
import FontAwesome from "react-native-vector-icons/FontAwesome";

class ContactsScreen extends Component {

    static navigationOptions = ({navigation}) => ({
      headerTitle: ``,
      headerLeft: <View><Text style={{marginLeft:15,fontSize:18,color:FONT_COLOR_TITLE}}>通讯录</Text></View>,
      // headerRight: <OffWorkView navigation={navigation}/>
    });

    // 构造
    constructor(props) {
      super(props);
      // 初始状态
      this.state = {
          groupList:[],  //组别
          groupListVisiable:{}, //组别打开或关闭
          phoneModalVisible:false,  //电话modal
          phoneArr:[], //拨打电话号码
          phoneName:'', //拨打电话人名
          searchList:false, //查询的时候显示的列表
          normalList:true, //正常状态下显示的列表
          searchText:'', //查询
      };
    }

    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <View style={styles.body}>
                    <View style={styles.container}>
                        <View style={styles.searchBox}>
                            <AntDesign name={'search1'} size={17} style={{color: FONT_COLOR_SUB_TITLE}}/>
                            <TextInput style={styles.inputText}
                                       keyboardType='web-search'
                                       placeholder='输入姓名或号码搜索'
                                       onChangeText={text => {
                                           this._search(text)
                                       }}
                            />
                        </View>
                    </View>

                    <View style={{height:1,backgroundColor: COLOR_GRAY_LINE}}/>

                    <ScrollView style={{backgroundColor:'white'}}>
                        {
                            this.state.normalList&&
                            (
                                this.props.onCacheUser.map((item, index) => {
                                    return this._listRender(item, index)
                                })
                            )
                        }
                        {
                            this.state.searchList&&
                            (
                                this.props.onCacheUser.map((item, index) => {
                                    return this._searchListRender(item, index)
                                })
                            )
                        }
                    </ScrollView>

                </View>

                {/*电话*/}
                <Modal
                    visible={this.state.phoneModalVisible}
                    //显示是的动画默认none
                    //从下面向上滑动slide
                    //慢慢显示fade
                    animationType = {'none'}
                    //是否透明默认是不透明 false
                    transparent = {true}
                    //关闭时调用
                    onRequestClose={()=> this.onRequestClose()}
                >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.modalContainer} >
                            <View style={styles.modalBox} >
                                <View style={styles.modalTitle} >
                                    <Text style={styles.modalTitleTextNum}>
                                        {this.state.phoneName}
                                    </Text>
                                </View>
                                {
                                    this.state.phoneArr.map((item, index) => {
                                        return this._phoneNum(item, index)
                                    })
                                }
                                <TouchableOpacity activeOpacity={1} onPress={()=>{
                                    this.onRequestClose();
                                }}>
                                    <View style={styles.modalBottom} >
                                        <Text style={styles.modalTitleText} >
                                            返回
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </SafeAreaView>
        )

    }

    onRequestClose(){
        this.setState({
            phoneModalVisible:false,
            groupList:[],
        })
    }

    _phoneNum=(item, index)=>{
        return(
            <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                this.onRequestClose();
                return Linking.openURL('tel:'+item);
            }}>
                <View style={styles.modalCenter} >
                    <Text style={styles.modalTitleText} >
                        {item}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    };

    _search=(text)=>{
        if(text===""){
            this.setState({searchText:text.toString(),searchList: false,normalList:true,groupList:[]});
        }else{
            this.setState({searchText:text.toString(),searchList: true,normalList:false,groupList:[],});
        }
    };

    _listRender=(item, index)=>{
        let _this = this;
        let depart_name = item.depart_name;
        if(index===0){
            if(!(depart_name in this.state.groupListVisiable)){
                this.state.groupListVisiable[depart_name] = true;
            }
            this.state.groupList.push(depart_name);
            return(
                <View key={index} style={{flexDirection: 'column',}}>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                        let json = _this.state.groupListVisiable;
                        json[depart_name] = !json[depart_name];
                        _this.setState({
                            groupList:[],
                            groupListVisiable:json
                        })
                    }}>
                        <View style={styles.listBody}>
                            <View style={styles.listTextBox}>
                                <View style={styles.listLeftBox}>
                                    <Text style={styles[this.state.groupListVisiable[depart_name]?'listLeftBoxTextTrue':'listLeftBoxText']}>
                                        {depart_name}
                                    </Text>
                                </View>
                            </View>

                            <View style={styles.arrowBox}>
                                {
                                    this.state.groupListVisiable[depart_name] ? <AntDesign name={'up'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/> : <AntDesign name={'down'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/>
                                }
                            </View>
                        </View>
                    </TouchableOpacity>
                    <View style={{height:1,backgroundColor: COLOR_GRAY_LINE}}/>
                    {
                        this.state.groupListVisiable[depart_name] &&
                        (
                            _this.props.onCacheUser.map((value, key) => {
                                return _this._listPersonRender(value, key,depart_name)
                            })
                        )
                    }
                </View>
            )
        }else{
            if(this.state.groupList.indexOf(depart_name)<0){
                if(!(depart_name in this.state.groupListVisiable)){
                    this.state.groupListVisiable[depart_name] = false;
                }
                this.state.groupList.push(depart_name);
                return(
                    <View key={index} style={{flexDirection: 'column',}}>
                        <TouchableOpacity activeOpacity={1} onPress={() => {
                            let json = _this.state.groupListVisiable;
                            json[depart_name] = !json[depart_name];
                            _this.setState({
                                groupList:[],
                                groupListVisiable:json
                            })
                        }}>
                            <View style={styles.listBody}>
                                <View style={styles.listTextBox}>
                                    <View style={styles.listLeftBox}>
                                        <Text style={styles[this.state.groupListVisiable[depart_name]?'listLeftBoxTextTrue':'listLeftBoxText']}>
                                            {depart_name}
                                        </Text>
                                    </View>
                                </View>

                                <View style={styles.arrowBox}>
                                    {
                                        this.state.groupListVisiable[depart_name] ? <AntDesign name={'up'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/> : <AntDesign name={'down'} size={18} style={{color: FONT_COLOR_SUB_TITLE}}/>
                                    }
                                </View>
                            </View>
                        </TouchableOpacity>

                        <View style={{height:1,backgroundColor: COLOR_GRAY_LINE}}/>

                        {
                            this.state.groupListVisiable[depart_name] &&
                            (
                                _this.props.onCacheUser.map((value, key) => {
                                    return _this._listPersonRender(value, key,depart_name)
                                })
                            )

                        }
                    </View>
                )
            }
        }
    };

    _listPersonRender=(value, key, depart_name)=>{
        if(value.depart_name===depart_name){
            return(
                <View key={key} style={{flexDirection: 'column',paddingLeft: 10}}>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                        if(value.phone||value.phone_short){
                            let phoneArr = [];
                            if(value.phone){
                                phoneArr.push(value.phone)
                            }
                            if(value.phone_short){
                                phoneArr.push(value.phone_short)
                            }
                            this.setState({
                                phoneModalVisible:true,
                                phoneArr:phoneArr,
                                phoneName:value.username,
                                groupList:[],
                            })
                        }
                    }}>
                        <View style={styles.listPersonBody}>
                            <View style={styles.listPersonTextBox}>
                                <View style={styles.listPersonLeftBox}>
                                    <Text style={styles.listPersonLeftBoxText}>
                                        {value.username}
                                    </Text>
                                </View>
                                <View style={styles.listPersonPhoneBox}>
                                    <Text style={styles.listPersonLeftBoxNum}>
                                        {value.phone},{value.phone_short}
                                    </Text>
                                </View>
                            </View>

                            <View style={styles.listPersonArrowBox}>
                                <FontAwesome name={'phone'} size={25} style={{color: '#4C70FF'}}/>
                            </View>
                        </View>
                    </TouchableOpacity>

                    <View style={{height:1,backgroundColor: COLOR_GRAY_LINE}}/>
                </View>
            )
        }
    };

    _searchListRender=(value, key)=>{
        if(!(value.phone)){
            value.phone = ""
        }
        if(!(value.phone_short)){
            value.phone_short = ""
        }
        if((value.username).indexOf(this.state.searchText)>=0||(value.phone).indexOf(this.state.searchText)>=0||(value.phone_short).indexOf(this.state.searchText)>=0){
            return(
                <View key={key} style={{flexDirection: 'column',paddingLeft: 10}}>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                        if(value.phone||value.phone_short){
                            let phoneArr = [];
                            if(value.phone){
                                phoneArr.push(value.phone)
                            }
                            if(value.phone_short){
                                phoneArr.push(value.phone_short)
                            }
                            this.setState({
                                phoneModalVisible:true,
                                phoneArr:phoneArr,
                                phoneName:value.username,
                            })
                        }
                    }}>
                        <View style={styles.listPersonBody}>
                            <View style={styles.listPersonTextBox}>
                                <View style={styles.listPersonLeftBox}>
                                    <Text style={styles.listPersonLeftBoxText}>
                                        {value.username}
                                    </Text>
                                </View>
                                <View style={styles.listPersonPhoneBox}>
                                    <Text style={styles.listPersonLeftBoxNum}>
                                        {value.phone},{value.phone_short}
                                    </Text>
                                </View>
                            </View>

                            <View style={styles.listPersonArrowBox}>
                                <FontAwesome name={'phone'} size={25} style={{color: '#4C70FF'}}/>
                            </View>
                        </View>
                    </TouchableOpacity>

                    <View style={{height:1,backgroundColor: COLOR_GRAY_LINE}}/>
                </View>
            )
        }
    }
}

const props = state => {
    return {
        onCacheUser: state.onCache.user,
    }
};

export default ContactsScreen = connect(props)(ContactsScreen);